<template>
    <div>
        <el-form>
            <el-form-item   label="角色名称">
                <el-col :span="12">
                    <el-input placeholder="请输入角色名" v-model="name"  class="handle-input mr10"></el-input>
                </el-col>
            </el-form-item>
        </el-form>
        <el-button type="primary"  @click="rolelist" >搜索</el-button>
        <el-button type="primary"  @click="addrole('')" >新增</el-button>
        <el-table 
                :data="data"
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
				<!-- 产品id -->
				<el-table-column prop="name" label="角色昵称" width="180" align="center"></el-table-column>
                <el-table-column prop="description" label="角色说明" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作"  align="center">
				    <template slot-scope="scope">
				        <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="updaterole( scope.row)"
				        >修改</el-button>
                        <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="roledelete( scope.row)"
				        >删除</el-button>
                        <!-- <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="checkmenu( scope.row)"
				        >查看权限</el-button> -->
                        <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="rolepermissionadd( scope.row)"
				        >添加权限</el-button>
					</template>
				</el-table-column>
            </el-table>
        
        <el-dialog :title="title" :visible.sync="editVisible" width="85%">
            <el-form ref="form" :model="role" label-width="80px">
                <el-form-item label="昵称">
                    <el-input v-model="role.name" placeholder="请输入角色昵称"></el-input>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" v-model="role.description" placeholder="请输入角色说明"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <!-- @click="saveEdit"-->
                <el-button type="primary" @click="updateClick(role)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="treetitle" :visible.sync="treeVisible" width="85%">
            <el-form ref="form" :model="role" label-width="80px">
              <el-tree  :data="menulist" :props="defaultProps"  :default-expand-all="expandall"></el-tree>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- @click="saveEdit"-->
                <el-button type="primary" @click="treeVisible=false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="addmenutitle" :visible.sync="addmenuVisible" width="85%">
            <el-form ref="form" :model="role" label-width="80px">
              <el-tree  
                :data="allmenulist" 
                :props="defaultProps" 
                show-checkbox 
                :default-expand-all="expandall"  
                node-key="id"
                ref="tree"
                :default-checked-keys="choosedRole"
                @check="checkGroupNode"
              ></el-tree>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- @click="saveEdit"-->
                <el-button  @click="addmenuVisible=false">取消</el-button>
                <el-button type="primary" @click="setrolepermissionadd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
import { menuadd } from '@/api/api.js';
import { permissionlist } from '@/api/api.js';
import { menuupdate } from '@/api/api.js';

export default {
    data() {
        return{
            role:{   
                name:"",
                description: "",
            },
            title:"新增角色",
            editVisible:false,
            data:[],
            name:"",
            defaultProps:{
                children: 'childList',
                label: 'name'
            },
            expandall:true,
            menulist:[],
            treetitle:"角色权限",
            treeVisible:false,
            addmenutitle:"添加权限",
            addmenuVisible:false,
            allmenulist:[],
            choosedRole:[],
            roleId:''
        }
    },
    created() {
        this.rolelist();
    },
    methods: {
        rolelist:function(){
            rolelist({
               name:this.name
            }).then(res => {
                    if(res.returnCode == 200){
                        this.data=res.data;
                    }
            })
        },
        addrole:function(data){
            this.role={   
                name:"",
                description: "",
            }
           this.editVisible=true;
        },
        updaterole:function(data){
            this.role=data;
            this.editVisible=true
        },
        updateClick:function(role){
            if(!role.name){
                this.$message.success(`请填写姓名`);
                return false;
            }
            // if(!menu.jumpUrl&&!menu.url){
            //     this.$message.success(`请选择填写访问地址或web跳转地址`);
            //     return false;
            // }
            // if(!menu.parentId){
            //     this.$message.success(`请填写父级id`);
            //     return false;
            // }
            if(role.id){
                this.roleupdate()
            }else{
                this.roleadd()
            }
          
        },
        roleupdate:function(){
            console.log(this.role)
            roleupdate({
                id:this.role.id,
                name:this.role.name,
                description:this.role.description
            }).then(res => {
                if(res.returnCode == 200){                   
                    this.rolelist();
                    this.editVisible=false;
                }
			})
        },
        roleadd:function(){
            roleadd(this.role).then(res => {
                if(res.returnCode == 200){                   
                    this.rolelist();
                    this.editVisible=false;
                }
			})
        },
        deleteauthorization:function(data){
            menudelete(data.id).then(res => {
                if(res.returnCode == 200){                   
                    this.rolelist();
                    this.editVisible=false;
                }
			})
        },
        handleSelectionChange:function(){

        },
        checkmenu:function(data){
            this.getcheckmenu(data,false);
            this.treeVisible=true;
        },
        getcheckmenu:function(data,orgetchoosedRole){
            checkmenu(data.id).then(res => {
                if(res.returnCode == 200){                   
                     this.menulist=res.data;
                     if(orgetchoosedRole){
                         this.orgetchoosedRole();
                     }    
                }
			})
        },
        orgetchoosedRole:function(){
            this.choosedRole=[];
            var menulist=this.menulist;
            var choosedRole=[];
            for(var i=0;i<menulist.length;i++){
                if(menulist[i].isSelect==1){
                    choosedRole.push(menulist[i].id);
                }
                if(menulist[i].chlidList){
                    var childList=menulist[i].chlidList;
                    for(var j=0;j<childList.length;j++){
                        if(childList[j].isSelect==1){
                            choosedRole.push(childList[j].id);
                        }
                        if(childList[j].chlidList){
                            var childListson=childList[j].chlidList;
                            for(var k=0;k<childListson.length;k++){
                                if(childListson[k].isSelect==1){
                                    choosedRole.push(childListson[k].id);
                                }
                            }
                        }
                    }
                }
            }
            this.choosedRole=choosedRole;
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys(choosedRole);
            });
        },
        rolepermissionadd:function(data){
            this.permissionlist();
            this.getcheckmenu(data,true);
            this.roleId=data.id;
        },
        roledelete:function(data){
            this.$confirm('确定要删除吗', '删除角色', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                callback: action => {
                    if (action === 'confirm') {
                        roledelete(data.id).then(res => {
                            if(res.returnCode == 200){                   
                                this.rolelist();
                            }
                        })
                    }else {
                        
                    }
                }
            })
      
        },
        permissionlist:function(){
            permissionlist({
                type:null,
                parentId:0
            }).then(res => {
                    if(res.returnCode == 200){
                        this.allmenulist=res.data;
                        this.addmenuVisible=true;
                        
                    }
            })
        },
        checkGroupNode:function(a,b){
            this.choosedRole=b.checkedKeys;
        },
        setrolepermissionadd:function(){
            var roleId=this.roleId;
            var choosedRole=this.choosedRole;
            var data=[];
            for(var i=0;i<choosedRole.length;i++){
                data.push({
                    roleId:roleId,
                    menuId:choosedRole[i]
                })
            }
            rolepermissionadd(data).then(res => {
                if(res.returnCode == 200){                   
                      this.addmenuVisible=false;
                }
			})
        }
    }
};
</script>

<!-- css样式实现 -->
<style scoped>
.custom-tree-node{
    width: 90%;
}
.custom-tree-node label{
    float: right;
    margin-left: 10px;
}
.custom-tree-node label span{
    color:#409EFF;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
    width: 250px;
}
.el-col-12 {
	width: 70%;
}
.el-form{
    display: inline-block;
    vertical-align: top;
}
</style>
